// import $ from "jquery";
import public_scss from "./../sass/public.scss";
import loupe_scss from "./../sass/loupe.scss";
const _ =require("lodash");
const layui=require("layui-layer");

let jsonData='';

$( function(){
    $.ajax({
      url:"http://10.41.151.78:8081/api/list",
    }).then(function (res) {

        //获取浏览器地址栏里的参数 id=xxx ,id为json数组的下标
        const id=getUrlParams("id");
        //从商品列表里面拿到对应下标的商品
        const goods=res[id-1];
        // console.log(goods)

        // 深度克隆
        let cloneObj=_.cloneDeep(goods);
        delete(cloneObj.imgsmall);
        
        console.log(cloneObj);

        $("#goshopping").attr("data-info",`${JSON.stringify(cloneObj)}`);

        // 商品标题
        $("#title").text(goods.title);

        // 格式化价格
        $("#price").text(goods.price);
           
        // 大图
        $("#minddle-box").append("<img src='"+goods.imgbig[0] +"' alt=''>");

        // 放大镜
        $("#bigimg").attr("src",goods.imgbig[0]);
        // 小图列表
        let smallHtml="";
        goods.imgsmall.forEach(item=>{
            smallHtml+="<li><img src='"+item+"' alt=''></li>";
        })
        $("#smUl").append(smallHtml);

        $(".frcart a").attr("href",`shopping.html?id=${goods.id}`);
        // $("#goshopping a").attr("href",`shopping.html?id=${goods.id}`);

        //放大镜
        /*
        *  公式:  小图/大图=小区域/大区域
        *   只能修改小区域
        *   小区域=(小图/大图)*大区域
        *  比例=大区域/小区域
        * */
        //  40/200 == 300/800

        $("#middleArea").css("width",$("#big-box").width()/$("#bigimg").width()*$("#minddle-box").width());
        $("#middleArea").css("height",$("#big-box").height()/$("#bigimg").height()*$("#minddle-box").height());     

        $("#minddle-box").hover(function(){
            $("#middleArea").show();
            $("#big-box").show();
    
            $(document).mousemove(function(e){
                // console.log(e);
                var mX=e.pageX -$("#minddle-box").offset().left-$("#middleArea").width()/2;
                var mY=e.pageY-$("#minddle-box").offset().top-$("#middleArea").height()/2;
    
                if(mX<=0){
                    mX=0;
                }
                if(mY<=0){
                    mY=0;
                }
                if(mX>=$("#minddle-box").width()-$("#middleArea").width()){
                    mX=$("#minddle-box").width()-$("#middleArea").width()
                }
                if(mY>=$("#minddle-box").height()-$("#middleArea").height()){
                    mY=$("#minddle-box").height()-$("#middleArea").height()
                }
                $("#middleArea").css({
                    left:mX,
                    top:mY
                });
                //算数比例
                // 大图/小图
                // 大区域/小区域  
                let scale=$("#bigimg") .width()/$("#minddle-box").width();
                $("#bigimg").css("left",-scale*mX);
                $("#bigimg").css("top",-scale*mY)
            })
    
        },function(){
            $("#middleArea").hide();
            $("#big-box").hide();
        }) 
        
        $("#min-box li").on("mouseenter",function(){
            $(this).addClass("mov").siblings().removeClass("mov");
            var $index=$(this).index();
            console.log($index)
            $("#minddle-box img").attr("src",`images/xiangqing${goods.id}-${$index-1}.jpg`);
            $("#bigimg").attr("src",`images/xiangqing${goods.id}-${$index-1}-1.jpg`);  
        });
     })
             
  })


function getUrlParams(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}


// $(function(){
//     $.getJSON("./data/data.json",function(data){
//         //获取浏览器地址栏里的参数 id=xxx ,id为json数组的下标
//         const id=getUrlParams("id");
//         console.log(id)
//         jsonData = data;
//         //从商品列表里面拿到对应下标的商品
//         const goods=jsonData[id-1];
//         console.log(goods)
//         // 商品标题
//         $("#title").text(goods.title);

//         // 格式化价格
//         let arr=String(goods.price).split("").reverse();
//         console.log(arr);
//         str1="";
//         for(let i=0,j=1;i<arr.length;i++,j++){
//             str1+=arr[i];
//             console.log(str1);
//             // if(j%3===0) str1+=",";
//         }
//         str1=str1.split("").reverse().join("");
//         console.log(str1);
//         $("#price").text(str1);
//         // 大图
//         $("#minddle-box").append("<img src='"+goods.imgbig[0] +"' alt=''>");
//         // 放大镜
//         $("#bigimg").attr("src",goods.imgbig[0]);
//         // 小图列表
//         let smallHtml="";
//         goods.imgsmall.forEach(item=>{
//             smallHtml+="<li><img src='"+item+"' alt=''></li>";
//         })
//         $("#smUl").append(smallHtml);
//     });
// })


// table栏
$(function(){
    $(".table-con").find(".top li").click(function(){
        $(this).addClass("con").siblings().removeClass("con");
        var $index=$(this).index();
        console.log($(this));
        $(this).parents(".table-con").find(".down li").eq($index).addClass("block").siblings().removeClass("block");
    });
})

// 回到顶部
$(function(){
    $(".talist-bmtab").on("click", "a", function () {
      $("html, body").animate({
          scrollTop: $($(this).attr("href")).offset().top + "px",
        },500);
      return false;
    });
  })




// let jsonData = [];

// $(function(){
//     $("#goshopping").click(function(){
//         let goods=null;
//         try{
//             let index=getUrlParams("id");
//             console.log(index);
//             goods=jsonData[index-1];
//         }catch(error){
//             console.log(error)
//             alert("获取的商品出错");
//             return;
//         }
//         let flag=true;
//         let goodsCar=JSON.parse(localStorage.getItem("goods_car"));
//         if(!goodsCar){
//             goodsCar=[];
//             goods.num=1;
//             goodsCar.push(goods);
//         }else{
//             goodsCar.forEach(item => {
//                 if(item.id==goods.id){
//                     flag=false;
//                     item.num+=1;
//                 }
//             });
//             if(flag){
//                 goodsCar.push(goods);
//             }
//         }
//         localStorage.setItem("goods_car",JSON.stringify(goodsCar));
//         window.location.href="./shopping.html";
//     })
// })



//飞入效果
$(function(){
   var table=$("#table").offset();
   console.log(table);
   var Null=0;
   $("#goshopping").click(function(){
        let data = $(this).data("info"); //发送到后端的准备数据
        console.log($("#num").val());
        // data.id=localStorage.getItem("goods_car");
        data.u_id=JSON.parse(localStorage.getItem("goods_car")).u_Id;
        // 购买数量
        data.num=Number($("#num").val());
        // 总计
        data.total=data.num * data.price;

        // console.log(data);
        var val=$("#num").val();
        Null+=eval(val);

       var _this=$(this);
       var IMG=_this.parents(".loupe").find("#minddle-box").find("img");
       console.log(IMG);
       var addclid=IMG.clone().css("opacity","0.6");
       $("#loupe-l").append(addclid);
       addclid.css({
        'z-index': 99999,
        'border': '3px solid #FFFFFF',
        'position': 'absolute',
        'height': IMG.height() + 'px',
        'width': IMG.width() + 'px',
        'top': IMG.offset().top + 'px',
        'left': IMG.offset().left + 'px',
       });
       addclid.animate({
        'width': 50 + 'px',
        'height': 50 + 'px',
        'border-radius': 100 + '%',
       },function(){
           addclid.animate({
            'top': ($('#table').height()) / -8 + 'px',
            'left': ($(document).width()) - ($('#model').width()) + 'px', //当前窗口的宽度-购物车的宽度   
            'width': 0,
            'height': 0,
           },1500,function(){
               addclid.remove();
               $(".cartItemCount").text(Null)
               $("#SPAN").text(Null);
           });
       });

       $.ajax({
        url:"http://10.41.151.78:8081/api/addCart",
        data,
        type:"post",
        dataType:"json"
    }).then(function(res){
        layer.msg(res.msg)
    });

   });
   return false; 
})


// 减法
$(".loupe-r .list2 li").eq(0).on("click",".jian",function(){
    let val=$(this).next("input").val();
    if(val <=1){
        val=1;
        return;
    }
    $(this).next("input").val($(this).next("input").val()-1);
});

// 加法
$(".loupe-r .list2 li").eq(0).on("click",".jia",function(){
    let val=$(this).prev("input").val();
    $(this).prev("input").val(Number($(this).prev("input").val())+1);
});

